<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="岗前知识培训" name="first">
            <div class="pretrain">
                <div v-for="(item) in contents" :key="item.id" class="prebox">
                    <div class="presp">
                        <img src="http://hxlgw.oss-cn-chengdu.aliyuncs.com/px/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200325133430.png" alt="">
                    </div>
                    <p class="prebt">{{item.content}}</p>
                    <div class="prexx">
                        <el-button type="success" @click="getdqtime(item.id);openMask(item.id)">
                            我要学习
                        </el-button>
                        <label class="timeLabel">时长{{item.trainingTime}}分钟</label>

                        <dialog-bar
                            v-model="sendVal"
                            type="danger"
                            :title="title"
                            :url="url"
                            v-on:cancel="clickCancel()"
                            @danger="clickDanger()"
                            @confirm="clickConfirm()"
                            dangerText="结束学习"
                        ></dialog-bar>
                        <span class="fsxsj">已学习{{item.cumulativeTime}}分钟</span>
                    </div>
                </div>
            </div>

        </el-tab-pane>
        <el-tab-pane label="食品安全培训" name="second">
            <div class="fstrain">
                <div v-for="(item) in contentss" :key="item.id" class="prebox">
                    <div class="presp">
                        <img src="http://hxlgw.oss-cn-chengdu.aliyuncs.com/px/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200325133423.jpg" alt="">
                    </div>
                    <p class="prebt">{{item.content}}</p>
                    <div class="prexx">
                        <el-button type="success" @click="getdqtime(item.id);openMask(item.id)">
                            我要学习
                        </el-button>


                        <dialog-bar
                            v-model="sendVal"
                            type="danger"
                            :title="title"
                            :url="url"
                            v-on:cancel="clickCancel()"
                            @danger="clickDanger()"
                            @confirm="clickConfirm()"
                            dangerText="结束学习"
                        ></dialog-bar>
                        <span class="fsxsj">已学习{{item.cumulativeTime}}分钟</span>
                    </div>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="疫情防控培训" name="third">
            <div class="eptrain">
                <div v-for="(item) in contentsy" :key="item.id" class="prebox">
                    <div class="presp">
                        <img src="http://hxlgw.oss-cn-chengdu.aliyuncs.com/px/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200325133428.png" alt="">
                    </div>
                    <p class="prebt">{{item.content}}</p>
                    <div class="prexx">
                        <el-button type="success" @click="getdqtime(item.id);openMask(item.id)">
                            我要学习
                        </el-button>

                        <dialog-bar
                            v-model="sendVal"
                            type="danger"
                            :title="title"
                            :url="url"
                            v-on:cancel="clickCancel()"
                            @danger="clickDanger()"
                            @confirm="clickConfirm()"
                            dangerText="结束学习"
                        ></dialog-bar>
                        <span class="fsxsj">已学习{{item.cumulativeTime}}分钟</span>
                    </div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import dialogBar from "./dialog.vue";
    import { getpxlist,getpxlistinfo } from "../api/pxlist.js";
    import { ksxx } from "../api/ksxx.js";
    import { jssj } from "../api/jssj.js";
    import moment from "moment";
    export default {
        name: "TestTwo",
        data() {
            return {
                activeName: "second",
                dqdata: "",
                sendVal: false,
                contents: [],
                contentss: [],
                contentsy: [],
                title: "",
                url: "",
                tt: "",
                activeName: 'first',
                id:''
            };
        },
        mounted() {},
        methods: {
            indata() {
                this.getlist();
            },
            handleClick(tab, event) {},
            getdqtime(id){
                console.log(id);
                const myDate = new Date();
                const tt = moment(myDate).format("YYYY-MM-DD hh:mm:ss");
                this.dqdata = myDate;
                ksxx({ beginTime: tt,contentId:id }).then(res => {
                });

            },
            openMask(id) {
                this.id=id
                this.sendVal = true;
                getpxlistinfo({contentId:id }).then(res => {
                    this.title=res.Data.content
                    this.url = res.Data.url
                });
            },
            clickCancel() {
                console.log("点击了取消");
            },
            clickDanger() {
                const jsDate = new Date();
                jsDate.getFullYear(); //获取完整的年份(4位,1970-????)
                jsDate.getMonth(); //获取当前月份(0-11,0代表1月)
                jsDate.getDate(); //获取当前日(1-31)
                jsDate.getHours(); //获取当前小时数(0-23)
                jsDate.getMinutes(); //获取当前分钟数(0-59)
                jsDate.getSeconds(); //获取当前秒数(0-59)
                const beforeYear = this.dqdata.getFullYear(); //获取学习开始年份
                const beforeMonth = this.dqdata.getMonth(); //获取学习开始月份
                const beforeDate = this.dqdata.getDate(); //获取学习开始日
                const beforeHours = this.dqdata.getHours(); //获取学习开始小时
                const beforeMinutes = this.dqdata.getMinutes(); //获取学习开始分钟
                const beforeSeconds = this.dqdata.getSeconds(); //获取学习开始秒数
                const getDifference =
                    (jsDate.getFullYear() - beforeYear) * 365 * 24 * 60 * 60 +
                    (jsDate.getMonth() - beforeMonth) * 30 * 24 * 60 * 60 +
                    (jsDate.getDate() - beforeDate) * 24 * 60 * 60 +
                    (jsDate.getHours() - beforeHours) * 60 * 60 +
                    (jsDate.getMinutes() - beforeMinutes) * 60 +
                    (jsDate.getSeconds() - beforeSeconds);
                const jss = moment(jsDate).format("YYYY-MM-DD hh:mm:ss");

                const trainingtime = Math.ceil(getDifference / 60);
                jssj({ endTime: jss, trainingTime: trainingtime,contentId:this.id}).then(res => {
                    this.getlist()
                });
                alert("您已学习了"+trainingtime+"分钟")

            },
            clickConfirm() {},
            getlist() {
                getpxlist().then(res => {
                    this.contents = res.Data[0].contents;
                    this.contentss = res.Data[1].contents;
                    this.contentsy = res.Data[2].contents;
                });
            }
        },
        components: {
            "dialog-bar": dialogBar
        },
        created() {
            this.indata();
            // this.getdqtime();
            // this.clickDanger();
        },
        filters: {
            formatDate: function(value) {
                return moment(value).format("YYYY-MM-DD");
            }
        }
    };
</script>

<style scoped>
    .timeLabel{
        font-size: 14px;
        color:#474747;
        margin-left: -25px;
    }
    .xxbtn {
        color: #fff;
    }
    .video-js .vjs-time-control {
        display: block;
    }
    .video-js .vjs-remaining-time {
        display: none;
    }
    .pretrain {
        width: 1266px;
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;
    }
    .prebox {
        height: 272px;
        width: 316px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        margin: 0 47px 100px 0;
    }
    .presp {
        width: 315px;
        height: 186px;
        border-radius: 6px;
    }
    .prebt {
        text-align: center;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        color: #666;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .prexx {
        width: 316px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .prexsj {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #474747;
    }
    .vdbox {
        width: 100%;
        height: 100%;
    }
    .fstrain {
        width: 1266px;
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;
    }
    .fsbox {
        height: 272px;
        width: 316px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        margin: 0 47px 100px 0;
    }
    .fssp {
        width: 315px;
        height: 186px;
        border-radius: 6px;
    }
    .fsbt {
        text-align: center;
        font-family: MicrosoftYaHei;
        font-size: 19px;
        color: #666;
    }
    .fsxx {
        width: 316px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .fsxsj {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #474747;
    }
    .vdfsbox {
        width: 100%;
        height: 100%;
    }
    .eptrain {
        width: 1266px;
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;
    }
    .epbox {
        height: 272px;
        width: 316px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        margin: 0 47px 100px 0;
    }
    .epsp {
        width: 315px;
        height: 186px;
        border-radius: 6px;
    }
    .epbt {
        text-align: center;
        font-family: MicrosoftYaHei;
        font-size: 19px;
        color: #666;
    }
    .epxx {
        width: 316px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .epxsj {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #474747;
    }
    .vdepbox {
        width: 100%;
        height: 100%;
    }
</style>
